<template>
  <dv-border-box-10 style="width: 100%;" v-show="Istheme == '0'">
    <el-card class=" item-background map_box">
      <div class="content">

        <el-dropdown class="dropdown" trigger="click" @command="handleClick">
          <span> 切换地图
            <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="baidu">百度地图</el-dropdown-item>
              <el-dropdown-item command="gaode">高德地图</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <baidu-map class="bm-view" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" v-show="mapTypes === 'baidu'" />
        <div id="container1" v-show="mapTypes === 'gaode'"></div>
      </div>
    </el-card>
  </dv-border-box-10>

  <dv-border-box-12 style="width: 100%;" v-show="Istheme == '1'">
    <el-card class=" item-background map_box">
      <div class="content">

        <el-dropdown class="dropdown" trigger="click" @command="handleClick">
          <span> 切换地图
            <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="baidu">百度地图</el-dropdown-item>
              <el-dropdown-item command="gaode">高德地图</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <baidu-map class="bm-view" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" v-show="mapTypes === 'baidu'" />
        <div id="container2" v-show="mapTypes == 'gaode'"></div>
      </div>
    </el-card>
  </dv-border-box-12>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
      mapTypes: 'baidu',
    }
  },
  computed: {
    Istheme() {
      return this.$store.state.global.theme
    },
  },

  mounted() {
    this.initMap()
    this.initMap2()
  },
  methods: {
    handleClick(val) {
      this.mapTypes = val
    },
    // 初始化高德地图
    initMap() {
      AMapLoader.load({
        "key": "efc66813821605e0a567d81b8e6bc487",
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map('container1', {
          viewMode: "2D",  //  是否为3D地图模式
          zoom: 13,   // 初始化地图级别
          center: [113.65553, 34.748764], //中心点坐标  郑州
          resizeEnable: true
        });
      }).catch(e => {
        console.log(e);
      });
    },

    initMap2() {
      AMapLoader.load({
        "key": "efc66813821605e0a567d81b8e6bc487",
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map('container2', {
          viewMode: "2D",  //  是否为3D地图模式
          zoom: 13,   // 初始化地图级别
          center: [113.65553, 34.748764], //中心点坐标  郑州
          resizeEnable: true
        });
      }).catch(e => {
        console.log(e);
      });
    }
  },
}

</script>

<style lang="scss" scoped>
.map_box {
  background: transparent;
  border: none;
  padding: 0;

  .content {
    border-radius: 5px;
    overflow: hidden;

    .dropdown {
      position: absolute;
      left: 30px;
      top: 30px;
      z-index: 9;
      color: var(--el-color-primary);
    }

  }

  .bm-view {
    border-radius: 5px;
    width: 100%;
    height: 335px;
  }

  #container1 {
    border-radius: 5px;
    width: 100%;
    height: 335px;
  }

  #container2 {
    border-radius: 5px;
    width: 100%;
    height: 335px;
  }
}
</style>